<template>
	<view>
		<view class="video_play">
			<video :autoplay="true" :src="videoInfo.url"></video>
		</view>
		<view class="comments_box">
			<scroll-view :scroll-y="true" @scrolltolower='scrollLower'>
				<view>
					<!-- 火热评论 -->
					<view class="hot_comm">
						<view class="hot_title">精彩评论</view>
						<view class="hot_comm_item" v-for="(item,index) in hotComments" :key="index">
							<view class="comm_user">
								<view class="user">
									<view><image class="user_avatar" :src="item.user.avatarUrl"></image></view>
									<view class="comm_name"><text>{{item.user.nickname}}</text></view>
								</view>
								<view>
									<uni-icons type="hand-thumbsup" size="15"></uni-icons>
									<text style="font-size: 20rpx;">{{item.likedCount}}</text>
								</view>
							</view>
							<view class="comm_content">{{item.content}}</view>
						</view>
					</view>
					<!-- 评论区 -->
					<view class="comments">
						<view class="comm_title">评论区</view>
						<view class="comm_item" v-for="(item,index) in comments" :key="index">
							<view class="comm_user">
								<view class="user">
									<view><image class="user_avatar" :src="item.user.avatarUrl"></image></view>
									<view class="comm_name"><text>{{item.user.nickname}}</text></view>
								</view>
								<view>
									<uni-icons type="hand-thumbsup" size="15"></uni-icons>
									<text style="font-size: 20rpx;">{{item.likedCount}}</text>
								</view>
							</view>
							<view class="comm_content">{{item.content}}</view>
						</view>
						<view style="font-size: 25rpx; text-align: center;margin-top: 15rpx;">已经到底了。。</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {getViComm} from '@/network/video.js'
	export default{
		data(){
			return{
				videoInfo:{},
				hotComments:[],
				comments:[],
				num:10
			}
		},
		comments:{
			uniIcons
		},
		methods:{
			scrollLower(){
				this.num += 10
				getViComm(this.videoInfo.data.vid,this.num).then(res => {
					this.hotComments = res.data.hotComments
					this.comments = res.data.comments
				})
			},
			getComm(vid){
				getViComm(vid,this.num).then(res => {
					// console.log(res)
					this.hotComments = res.data.hotComments
					this.comments = res.data.comments
				})
			}
		},
		onLoad(res) {
			uni.getStorage({
				key:"videoInfo",
				success:(res) => {
					this.videoInfo = res.data
				}
			})
			this.getComm(res.vid)
		},
		onHide() {
			uni.$emit('refresh')
		}
	}
</script>

<style lang="scss">
	.video_play{
		margin-top: 20rpx;
		video{
			width: 100%;
			height: 350rpx;
			border-radius: 10rpx;
		}
	}
	.comments_box{
		width: 100%;
		height: 860rpx;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-top: 10rpx solid #F1F1F1;
		overflow: hidden;
		scroll-view{
			height: 800rpx;
			.hot_comm{
				margin-bottom: 20rpx;
				.hot_title{
					font-style: italic;
					font-weight: bolder;
					margin: 25rpx 0 15rpx 25rpx;
					font-size: 30rpx;
					border-bottom: 3rpx solid #F1F1F1;
				}
				.hot_comm_item{
					margin-top: 15rpx;
					border-bottom: 5rpx solid #F1F1F1;
					.comm_user{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 15rpx;
						.user{
							display: flex;
							align-items: center;
							.user_avatar{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
							.comm_name{
								font-size: 20rpx;
								margin-left: 10rpx;
							}
						}
					}
					.comm_content{
						font-size: 25rpx;
						padding: 20rpx;
					}
				}
			}
			.comments{
				.comm_title{
					font-style: italic;
					font-weight: bolder;
					margin: 25rpx 0 15rpx 25rpx;
					font-size: 30rpx;
					border-bottom: 3rpx solid #F1F1F1;
				}
				.comm_item{
					margin-top: 15rpx;
					border-bottom: 5rpx solid #F1F1F1;
					.comm_user{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 15rpx;
						.user{
							display: flex;
							align-items: center;
							.user_avatar{
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
							.comm_name{
								font-size: 20rpx;
								margin-left: 10rpx;
							}
						}		
					}
					.comm_content{
						font-size: 25rpx;
						padding: 20rpx;
					}
				}
			}
		}
	}
</style>
